<template>
  <div class="upload">
    <div v-for="(item, index) in imgUrl" :key="index" class="imgBox">
      <i class="delImg el-icon-close" @click="delImg(index)" />
      <el-image :style="`width: ${width}; height: ${height}`" :src="item" :preview-src-list="imgUrl" />
    </div>
    <el-upload
      v-if="imgUrl.length < limitNum "
      :action="uploadOptions.url"
      :headers="uploadOptions.header"
      class="avatar-uploader"
      name="file"
      accept="image/png, image/jpeg"
      :show-file-list="false"
      :on-exceed="handleExceed"
      :on-success="handleAvatarSuccess"
      :on-change="handleAvatarProgress"
      :style="`width: ${width}; height: ${height}`"
    >
      <i class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
class UploadOptions {
  // url = process.env.VUE_APP_BASE_API + '/files/imgUpload';
  // url = process.env.VUE_APP_BASE_API + '/files/imgUpload';
  url = window.server.SERVER_API[0].api + '/files/imgUpload';
  // url = getToken('api_domain') + '/files/imgUpload';
  header = {
    'Authentication': getToken('auth_key') ? getToken('auth_key') : '',
    'userId': getToken('session_id') ? getToken('session_id') : '',
    'clientType': 0
  }
}
export default {
  name: 'ImgUploadCard',
  props: {
    existUrl: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '120px'
    },
    height: {
      type: String,
      default: '120px'
    },
    fileDir: {
      type: String,
      default: ''
    },
    limitNum: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      uploadOptions: new UploadOptions(),
      imgUrl: [], // 图片
      dialogImageUrl: '',
      dialogVisible: false
    };
  },
  watch: {
    existUrl(newVal) {
      //   this.imgUrl = newVal.split(',');
      this.imgUrl = newVal ? newVal.split(',') : [];
    },
    width(e) {
      // console.log(e);
    }
  },
  mounted() {
    // console.log(this.limitNum);
    // console.log(this.imgUrl.length);
    // console.log('existUrl', this.existUrl);
    // if (this.existUrl) {
    //   this.imgUrl = this.existUrl ? this.existUrl.split(',') : [];
    // }
    if (this.fileDir) {
      this.uploadOptions.header['file-dir'] = this.fileDir;
    }
    // console.log(this.uploadOptions.header.file_dir);
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 超出回调
    handleExceed() {
      this.$message.error(`最多可上传${this.limitNum}张图片！`);
    },
    // 初始化图片显示
    open() {
      this.imgUrl = [];
    },
    delImg(index) {
      this.imgUrl.splice(index, 1);
      this.$emit('setUrl', this.imgUrl);
    },
    // 图片上传校验
    beforeAvatarUpload(file) {
      console.log(file);
      if (file.type.indexOf('image') == -1) {
        this.$message.error('请上传正确的图片格式');
        return false;
      }
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('上传凭证图片大小不能超过10MB!');
        return false;
      }
    },
    // 上传图片成功回调
    handleAvatarSuccess(res) {
      if (res) {
        this.imgUrl.push(res.data);
        this.$emit('setUrl', this.imgUrl.join(','));
      } else {
        this.$message.info(res.msg);
      }
    },
    // 上传图片失败回调
    handleAvatarProgress(res) {
      // console.log(res);
      // if (res) {
      //   const { data } = res;
      //   this.imgUrl = {
      //     absoluteUrl: data.file_path,
      //     relativeUrl: data.save_name
      //   };
      //   this.$emit('setUrl', this.imgUrl);
      // } else {
      //   this.$message.info(res.msg);
      // }
    }
  }
};
</script>

<style scoped lang="scss">
$img_width: 120px;
$img_height: 120px;
.upload {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.imgBox {
  position: relative;
  margin: 5px;
}
.imgBox:hover .delImg {
  display: block;
}
.delImg {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 26px;
  height: 26px;
  line-height: 26px;
  background: #ffffff;
  color: red;
  text-align: center;
  z-index: 9;
}
.avatar-uploader ::v-deep.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.avatar-uploader ::v-deep.el-upload:hover {
  border-color: #295394;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  // width: $img_width;
  // height: $img_height;
  // line-height: $img_height;
  // text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar {
  // width: $img_width;
  // height: $img_height;
  width: 100%;
  height: 100%;
  display: block;
}
</style>
